<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'报名详情'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }">
      <!-- height: 'calc(100vh - ' + (safeAreaInsets?.top + 120) + 'px)' -->
      <view class="area max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px'}" v-if="listdetailsData">
        <scroll-view scroll-y class="scroll_box">
          <!-- 第一块 薪资信息 -->
          <view class="one_box">
            <!-- 岗位 -->
            <view class="one_top_box">
              <view class="recruit_image">
                <image :src="`${baseUrl}/uploads/uniapp_image/user/Direct_admission_title.png`" mode="scaleToFill"/>
              </view>
              <view>{{ listdetailsData.title }}</view>
            </view>
            <!-- 地区  && 经验 && 学历 -->
            <view class="region">
              {{ city }} <text>|</text> {{ listdetailsData.experience }} <text>|</text> 学历不限
              
            </view>
            <!-- 薪资 -->
            <view class="pay">{{ listdetailsData.salary_start }}~{{ listdetailsData.salary_end }}/月</view>
            <!-- 招聘者 -->
            <view class="recruiter_box">
              <!-- 左侧信息 -->
              <view class="recruiter_left">
                <!-- 头像 -->
                <view class="recruiter_image">
                  <image :src="`${baseUrl}${listdetailsData.company_avatar}`" mode="aspectFill"/>
                </view>
                <view>
                  <view class="recruiter_title">{{ listdetailsData.company }}</view>
                  <view class="recruiter_content">{{ listdetailsData.company }}</view>
                </view>
              </view>
              <!-- 右侧箭头 -->
              <view class="recruiter_right">
                <up-icon name="arrow-right" color="#999999" size="20"></up-icon>
              </view>
            </view>
          </view>
          <!-- 第二块 职位信息 -->
          <view class="two_box">
            <!-- <view class="two_title">岗位亮点</view>
            <view class="two_content">提供住宿、晋升空间大、免费下午茶、环境优美、升职加薪、弹性上班</view>
            <view class="two_title">职位描述</view> -->
            <view class="two_content">
              {{ listdetailsData.content }}
              <!-- 公司简介<br> 
              1、黑龙江省中远人力资源服务有限公司，成立于2017年，<br>  
              位于黑龙江省哈尔滨市，是一家以从事商务服务业为主的企业。<br> -->
            </view>
          </view>
          <!-- 第三块 企业信息 -->
          <view class="three_box">
            <view class="three_title">企业信息</view>
            <!-- 信息盒子 -->
            <view class="three_message">
              <view class="logo">
                <image :src="`${baseUrl}${listdetailsData.company_avatar}`" mode="aspectFill"/>
              </view>
              <view class="right_message">
                <view class="message_title">黑龙江省中远人力资源服务有限公司</view>
                <!-- <view class="enterprise_message">民营企业<text>|</text>500-1000人<text>|</text>操作工</view> -->
              </view>
            </view>
            <!-- 地图 -->
            <view class="three_map">
              <!-- :enable-scroll="false" :enable-zoom="false" -->
              <map :latitude="latitude" :longitude="longitude" :markers="markers" :enable-scroll="false" :enable-zoom="false">
              </map>
            </view>
          </view>
          <!-- 下占位 -->
          <view class="placeholder"></view>
        </scroll-view>
      </view>
  
      <!-- 底部按钮 -->
      <view v-if="is_apply == 0">
        <s-button @leftNetWork="cancellation" @rightNetWork="rightNetWork"  :leftWidth="'50%'" :rightWidth="'50%'" :type="'twobutton'" :oneText="'打电话'" :twoText="'立即投递'" ></s-button>
      </view>
      <view v-else>
        <s-button @netWork="cancellation" :text="'打电话'"></s-button>
      </view>
    </s-layout>
  </template>
  <script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad,onShow } from "@dcloudio/uni-app";
    import { reactive, ref } from "vue";
    import tools from '@/sheep/helper/tools.js';
    import sheep from "@/sheep";
    // 获取系统信息
    const { safeAreaInsets }  = uni.getSystemInfoSync();
    onLoad((option) => {
      id.value = option.ids
      getListDetailData(option.ids)
      is_apply.value = option.is_apply
    });
    const id = ref()
    const is_apply = ref()
    const listdetailsData = ref()
    const city = ref('')
    const latitude = ref()  // 经度
    const longitude = ref() // 纬度
    // 封装报名详情接口
    const getListDetailData = async (id) => {
        let params = {
        ids:id
        }
        const res = await sheep.$api.recruitment.getRecruitmentView(params)
        listdetailsData.value = res.data
        city.value = res.data.city.replace(/,/g, '-');
        latitude.value = Number(res.data.lat)
        longitude.value = Number(res.data.lon)
        phone_number.value = res.data.contact
        markers.value = [{
        id:1,
        latitude:latitude.value,
        longitude:longitude.value,
        width:30,
        height:30,
        iconPath:`${baseUrl}/uploads/uniapp_image/staff/Myinterview_icon_location@2.png`,
        label:{
          content:res.data.address,
          fontSize:15,
          bgColor:'#fff',
          anchorY:-60,
          borderRadius:50,
          textAlign:'center',
          padding:5
        }
      }]
    }
  
    // 打电话
    const phone_number = ref()
    const cancellation = () => {
      tools.callPhone(phone_number.value)
    }
  
    // 报名
    const rightNetWork = async () => {
      let data = {
        recruitment_id:id.value
      }
      await sheep.$api.recruitment.postbmRecruitmentApply(data).then((res) => {
        sheep.$router.back(true)
      })
    }
  
    const markers = ref([])
  </script>
      
  <style scoped lang="scss">
    page {
      width: 100%;
      height: 100%;
    }
  
    // 版心
    .area {
      width: calc(100% - 40rpx);
      margin: 0 20rpx;
    }
  
    :deep(.u-form-item__body.data-v-b4fd400b) {
      padding: 20rpx 0 20rpx 30rpx;
    }
  
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
      font-weight: $uni-font-weight;
    }
  
    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
      margin-left: 200rpx !important;
    }
  
    // 最大盒子
    .max_box {  // 330
      height: calc(100vh - 20vh);
      margin-top: 20rpx;
      // margin-bottom: 20rpx;
    }
  
    // 滚动容器盒子
    .scroll_box {
      height: 100%;
    }
  
    // 上下占位
    .placeholder {
      height: 40rpx;
    }
  
    // 第一块 薪资信息
    .one_box {
      height: 300rpx;
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      background-color: #ffffff;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
      padding: 30rpx;
      // 岗位盒子
      .one_top_box {
        display: flex;
        align-items: center;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 700;
        font-size: $uni-font-size-big;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        margin-bottom: 20rpx;
        // 直招图片盒子
        .recruit_image {
          width: 48rpx;
          height: 32rpx;
          margin-right: 10rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      // 地区 && 经验 && 学历
      .region {
        display: flex;
        align-items: center;
        font-family: PingFangSC;
        color: #666666;
        font-weight: $uni-font-weight;
       font-size:$uni-font-size-26;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        display: flex;
        margin-bottom: 20rpx;
        text {
          color: #979797;
          font-size: 20rpx;
          display: inline-block;
          margin: 0 20rpx;
          font-weight: normal;
        }
      }
      // 薪资
      .pay {
        font-family: PingFangSC;
        color: #FF6600;
        font-weight: 700;
        font-size:30rpx;
        font-style: normal;
        text-decoration: none;
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #F4F4F4;
        margin-bottom: 30rpx;
      }
      // 招聘者盒子
      .recruiter_box {
        display: flex;
        align-items: center;
        height: 64rpx;
        justify-content: space-between;
        // 左侧信息
        .recruiter_left {
          display: flex;
          align-items: center;
          // 头像
          .recruiter_image {
            width: 64rpx;
            height: 64rpx;
            margin-right: 20rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .recruiter_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 700;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            text-align: left;
          } 
          .recruiter_content {
            font-family: PingFangSC;
            color: #999999;
            font-weight: 500;
            font-size: 20rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
          }
        }
      }
    }
  
    // 第二块 职位信息
    .two_box {
      padding: 30rpx 30rpx 40rpx 30rpx;
      // height: 458rpx;
      border-radius: 16rpx;
      background-color: #ffffff;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
      // 内容标题
      // .two_title {
      //   font-family: PingFangSC;
      //   color: $uni-text-color;
      //   font-weight: $uni-font-weight;
      //   font-size: $uni-font-size-big;
      //   font-style: normal;
      //   text-decoration: none;
      //   text-align: left;
      //   margin: 30rpx 0 20rpx 0;
      //   // margin-bottom: 20rpx;
      // }
      // .two_title:first-child {
      //   margin: 0 0 20rpx 0;
      // }
      // // 内容
      // .two_content {
      //   font-family: PingFangSC;
      //   color: #999999;
      //   font-weight: 500;
      //  font-size:$uni-font-size-26;
      //   line-height: 40rpx;
      //   font-style: normal;
      //   text-decoration: none;
      //   text-align: left;
      // }
    }
  
    // 第三块 企业信息
    .three_box {
      padding: 30rpx 30rpx 40rpx 30rpx;
      height: 602rpx;
      border-radius: 16rpx;
      background-color: #ffffff;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
      margin-top: 20rpx;
      // 企业信息
      .three_title {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-big;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        margin: 0 0 20rpx 0;
      }
      // 信息盒子
      .three_message {
        height: 100rpx;
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;
        .logo {
          width: 100rpx;
          height: 100rpx;
          border-radius: 8rpx;
          background-color: $uni-bg-color;
          margin-right: 28rpx;
          box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
          image {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
          }
        }
        .right_message {
          // display: flex;
          // align-items: center;
          .message_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 500;
            font-size: 30rpx;
            line-height: 40rpx;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 6rpx;
          }
          .enterprise_message {
            display: flex;
            align-items: center;
            font-family: PingFangSC;
            color: #999999;
            font-weight: 400;
            font-size: $uni-font-size-sm;
            line-height: 40rpx;
            font-style: normal;
            text-decoration: none;
            text {
              color: #979797;
              font-size: 20rpx;
              display: inline-block;
              margin: 0 20rpx;
              font-weight: normal;
            }
          }
        }
  
      }
      // 地图
      .three_map {
        height: 408rpx;
        overflow: hidden;
        map {
          width: 100%;
          height: 440rpx;
        }
      }
    }
  
  </style>